<script setup lang="ts">
import { onMounted } from 'vue'
import { ECharts, EChartsOption, init } from 'echarts';

//折线图接收类型限制
interface lineChartType {
    gt: number
    config: {
        xAxis: {
            type: string,
            data: string[]
        }
        yAxis: {
            type: string
        }
        series: { data: number[], type: string }[]
    }
}

const props = defineProps<lineChartType>()
console.log(props.config,21);

onMounted(() => {
    // 获取dom，断言HTMLElement类型，否则会报错
    const chartEle: HTMLElement = document.getElementById('chart') as HTMLElement;
    console.log(chartEle, 888);
    const chart = init(chartEle);
    /**
     * const option: EChartsOption = props.config;
     * props.config已经限制了类型lineChartType，把他赋值给类型为EChartsOption的变量，报错
     */
    const option = props.config;
    option && chart.setOption(option);
})


// let chart: ECharts;
// const chartRef: Ref<HTMLElement | null> = ref(null)

// const initChart = () => {
//   const option: EChartsOption = {
//     xAxis: {
//       type: 'category'
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [
//       {
//         type: 'line'
//       }
//     ]
//   };
//   chart.setOption(option);
// }
// const updateChart = () => {
//   const option: EChartsOption = {
//     xAxis: {
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//     },
//     series: [
//       {
//         data: [150, 230, 224, 218, 135, 147, 260]
//       }
//     ]
//   };
//   chart.setOption(option);
// }

// onMounted(() => {
//   console.log(chartRef.value,888);
//   chart = init(chartRef.value as HTMLElement)
//   initChart()
//   // 延时2秒后执行增量更新
//   setTimeout(() => {
//     updateChart()
//   }, 2000)
// })
</script>
<template>
    <div id="chart" ref="chartRef" style="width:100%;height:200px"></div>
</template>